<template>
    <div class="operate-log">
      <!-- 查询表单 start -->
      <ui-form :model="queryForm" class="query-form">
        <ui-form-item prop="operTime" label="时间范围">
          <ui-date-picker
            v-model="queryForm.operTime"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </ui-date-picker>
        </ui-form-item>
        <ui-form-item label="用户名">
          <ui-input v-model="queryForm.operName" placeholder="请输入用户名"></ui-input>
        </ui-form-item>
        <ui-form-item label="业务类型">
          <ui-input v-model="queryForm.businessType" placeholder="请输入业务类型"></ui-input>
        </ui-form-item>
        <ui-form-item label="操作结果">
          <ui-select v-model="queryForm.status" placeholder="请选择操作结果">
            <ui-option :value="0" label="成功"></ui-option>
            <ui-option :value="1" label="失败"></ui-option>
          </ui-select>
        </ui-form-item>
        <ui-form-item>
          <ui-button class="primary-btn" @click="searchList(true)" icon="ui-icon-search">查询</ui-button>
          <ui-button class="default-btn" @click="reset" icon="ui-icon-refresh-right">重置</ui-button>
        </ui-form-item>
      </ui-form>
      <!-- 查询表单 end -->
      <!-- 数据表格 start -->
      <vx-nodata :list="tableData" v-loading="isLoading" sub-title="暂无数据">
        <ui-table :data="tableData">
          <ui-table-column prop="id" label="流水号"> </ui-table-column>
          <ui-table-column prop="operName" label="用户名"> </ui-table-column>
          <ui-table-column prop="operTime" label="操作时间"> </ui-table-column>
          <ui-table-column prop="businessType" label="业务类型"> </ui-table-column>
          <ui-table-column label="操作结果">
            <template v-slot="scope">
              <span :class="scope.row.status === 0 ? 'success' : 'error'">{{ scope.row.status === 0 ? '成功' : '失败' }}</span>
            </template>
          </ui-table-column>
          <!-- <ui-table-column label="操作类型">
            <template v-slot="scope">
              {{ format(scope.row.operType) }}
            </template>
          </ui-table-column> -->
          <ui-table-column label="操作">
            <template v-slot="scope">
              <ui-button type="text" icon="ui-icon-tickets" @click="subDetail(scope.row)" v-loading="scope.row.detailLoading">详情</ui-button>
            </template>
          </ui-table-column>
        </ui-table>
        <ui-pagination
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          :layout="layout"
          :page-sizes="pageSizeList"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </ui-pagination>
      </vx-nodata>
      <!-- 数据表格 end -->
      <!-- 详情弹框 start -->
      <vx-dialog :append-to-body="false" auto-hide v-model="showDetail" title="操作日志详情">
        <table class="detail-info-table">
          <tr>
            <th class="detail-info-table-title">流水号</th>
            <td class="detail-info-table-content">{{ logDetail.id }}</td>
            <th class="detail-info-table-title">用户名</th>
            <td class="detail-info-table-content">{{ logDetail.operName }}</td>
          </tr>
          <tr>
            <th class="detail-info-table-title">操作时间</th>
            <td class="detail-info-table-content">{{ logDetail.operTime | dateFilter('YYYY-MM-DD HH:mm:ss') }}</td>
            <th class="detail-info-table-title">业务类型</th>
            <td class="detail-info-table-content">{{ logDetail.businessType }}</td>
          </tr>
          <tr>
            <th class="detail-info-table-title">操作结果</th>
            <td class="detail-info-table-content" :class="logDetail.status === 0 ? 'success' : 'error'">
              {{ logDetail.status === 0 ? '成功' : '失败' }}
            </td>
            <th class="detail-info-table-title">主机IP</th>
            <td class="detail-info-table-content">{{ logDetail.operIp }}</td>
          </tr>
          <tr>
            <th class="detail-info-table-title">操作URL</th>
            <td class="detail-info-table-content">{{ logDetail.operUrl }}</td>
            <th class="detail-info-table-title">方法</th>
            <td class="detail-info-table-content">{{ logDetail.method }}</td>
          </tr>
          <tr>
            <th class="detail-info-table-title">操作类型</th>
            <td class="detail-info-table-content">{{ format(logDetail.operType) }}</td>
            <th class="detail-info-table-title">请求方式</th>
            <td class="detail-info-table-content">{{ logDetail.requestMethod }}</td>
          </tr>
          <tr>
            <th class="detail-info-table-title">操作字段</th>
            <td colspan="5">{{ logDetail.operParam }}</td>
          </tr>
        </table>
      </vx-dialog>
      <!-- 详情弹框 end -->
    </div>
  </template>
  
  <script>
  import poerateLogApi from '@/api/operate-log';
  import pagination from '@/common/mixin/pagination.js'; // 混入/分页
  export default {
    name: 'operate-log',
    mixins: [pagination],
    data() {
      return {
        queryForm: {
          operTime: [],
        }, // 查询表单
        operatorType: [], // 操作类型列表
        tableData: [], // 列表数据
        isLoading: false, // 查询列表loading
        showDetail: false, // 详情弹框
        logDetail: {}, // 详情数据
        layout: 'prev, pager, next, total',
      };
    },
    created() {
      // 获取操作类型选项
      this.queryOperatorType();
      // 获取列表数据
      this.searchList();
    },
    methods: {
      /**
       * 获取详情
       * @param {object} value 当前列表数据
       */
      async subDetail(value) {
        this.$set(value, 'detailLoading', true);
        try {
          const res = await poerateLogApi.getlogDetail({ id: value.id });
          this.logDetail = res.data;
          this.showDetail = true;
        } finally {
          this.$set(value, 'detailLoading', false);
        }
      },
      /**
       * 格式化操作类型字段
       * @param {number} value 操作类型值
       * @returns {string} 格式化后的操作类型名称
       */
      format(value) {
        let result = this.operatorType.find((i) => i.dictCode === value);
        if (result) {
          return result.dictName;
        } else {
          return '其他';
        }
      },
      /**
       * 获取操作类型选项
       */
      async queryOperatorType() {
        try {
          const res = await poerateLogApi.dictByType({ types: 'operator_type' });
          if (res.data.operator_type) {
            this.operatorType = res.data.operator_type.map((item) => {
              // 将dictCode隐式转换为number类型
              item.dictCode = item.dictCode - 0;
              return item;
            });
          }
        } catch (err) {
          console.log(err);
        }
      },
      /**
       * 查询操作日志
       * @param {boolean} val 是否重置当前页签
       */
      async searchList(val) {
        this.isLoading = true;
        // 点击查询按钮 将页签重置为1
        if (val) {
          this.currentPage = 1;
        }
        try {
          const res = await poerateLogApi.getLogList({
            ...this.queryForm, // 筛选条件
            beginTime: this.queryForm.operTime[0] || '', // 开始时间
            offTime: this.queryForm.operTime[1] || '', // 结束时间
            pageSize: this.pageSize, // 页码
            pageNum: this.currentPage, // 每页条数
          });
          res.data.list.forEach((item, index) => {
            item.index = index + 1;
          });
          this.tableData = res.data.list;
          this.total = Number(res.data.total || 0);
        } finally {
          this.isLoading = false;
        }
      },
      /**
       * 重置
       */
      reset() {
        this.queryForm = { operTime: [] };
        this.currentPage = 1;
        this.searchList();
      },
    },
  };
  </script>
  
  <style lang="scss">
  .operate-log {
    .ui-icon-plus,
    .ui-icon-search {
      color: #fff;
    }
    .vx-dialog.ui-dialog {
      width: 750px;
    }
    .success {
      color: $color-success;
    }
    .error {
      color: $color-danger;
    }
  }
  </style>
  